<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-24 14:14:29
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-25 14:08:30
-->
<template>
  <el-form
    :model="form"
    :rules="rules"
    label-width="120px"
    label-position="top"
  >
    <el-form-item label="名称" prop="name">
      <el-input :disabled="props.type === 'edit'" v-model="form.name" />
    </el-form-item>
    <el-form-item label="显示名称">
      <el-input v-model="form.displayName" />
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="form.description" />
    </el-form-item>
    <el-form-item label="允许的访问令牌签名算法">
      <el-input v-model="form.allowedAccessTokenSigningAlgorithms" />
    </el-form-item>
    <el-form-item label="">
      <el-checkbox
        v-model="form.showInDiscoveryDocument"
        label="在发现文档中显示"
      />
    </el-form-item>
    <el-form-item label="" v-if="props.type === 'edit'">
      <el-checkbox v-model="form.enabled" label="启用" />
    </el-form-item>
    <el-form-item label="Scopes" v-if="props.type === 'edit'">
      <setScopesRadio v-model="form.scope" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from 'vue'

import { IElFormRule } from '@/types/element-plus'

import setScopesRadio from '../components/setScopesRadio.vue'

const props = defineProps({
  modelValue: {
    type: Object as PropType<{
      name: string
      displayName: string
      description: string
      allowedAccessTokenSigningAlgorithms: string
      showInDiscoveryDocument: boolean
      enabled: boolean
      scope: string
    }>,
    required: true,
  },
  type: {
    type: String as PropType<'add' | 'edit'>,
    required: true,
  },
})
interface EmitsType {
  (
    e: 'update:modelValue',
    form: {
      name: string
      displayName: string
      description: string
      allowedAccessTokenSigningAlgorithms: string
      showInDiscoveryDocument: boolean
      enabled: boolean
      scope: string
    },
  ): void
}
const emit = defineEmits<EmitsType>()

const form = ref(props.modelValue)
const rules = ref<IElFormRule>({
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
})
watch(
  () => props.modelValue,
  () => {
    form.value = props.modelValue
  },
  {
    deep: true,
  },
)

watch(form.value, () => {
  emit('update:modelValue', form.value)
})
</script>

<style scoped lang="scss"></style>
